<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画圆形
		     2.画正三角形
			 思路：         html     div元素
			               css       倒角，必须有边框
		     思路2          html     div元素 #triangle
			                css      斜边
							         不设置宽高
									 左边框:50像素实线红色       transparent
									 右边框：50像素实线黄色       transparent
									 下边框：50像素实现蓝色、透明度 .3-->
		<style>
			/* 1.画圆 */
			div#circle{
				width: 300px;
				height: 300px;
				border: 1px solid red ;
				border-radius: 50%;
				/* 边框阴影属性  box-shadow属性; */
				box-shadow: 5px 5px 50px 10px red inset;
			}
			/* 2.三角形 */
			div#triangle{
				width: 0;
				/* border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid rgba(0, 0, 255, 3); */
				/* 两行：全部设置未透明色，上面的三角设置颜色 */
				border: 50px solid transparent;
				border-top-color: rgba(0, 0, 255, .3);
			}
			input{
				outline:1px solid red;
				outline: 0;    /* 去掉边框效果,通配选择器中 */ 
			}
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>